<template>
  <div>
    <div style="padding: 10px 0">
      <el-input style="width: 250px" placeholder="请输入群组名称" :suffix-icon="Search" v-model="searchname"></el-input>

      <el-button type="primary" style="margin-left: 5px" @click="search()">
        <el-icon style="vertical-align: middle;">
          <search />
        </el-icon>
        <span style="vertical-align: middle;"> 搜索 </span>
      </el-button>
      <el-button @click="creat()"  size="default" type="primary" style="margin-right: 5px">新建群组<el-icon><danger/></el-icon></el-button>
    </div>

    <!--  </el-table>-->

    <el-table :data="tableData" border style="width: 100%" >

      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.users"  >

              <el-table-column label="答者名称 " prop="username" />
              <el-table-column label="答者电话" prop="phone" />


              <el-table-column fixed="right" label="操作" width="370"  align="center">
                <template v-slot="scope">
                  <el-button @click="deleteAnswer(scope.row.username)"  size="default" type="danger">删除<el-icon><check /></el-icon></el-button>
                </template>
              </el-table-column>

            </el-table>

          </div>
        </template>
      </el-table-column>

      <el-table-column label="群组ID" prop="id" />
      <el-table-column label="群组名称" prop="name" />
      <el-table-column label="群组描述" prop="description" />
      <el-table-column label="群组状态" prop="state" />

      <el-table-column fixed="right" label="操作" width="370"  align="center">
        <template v-slot="scope">

          <el-button @click="edit(scope.row.id)"  size="default" type="primary">编辑群组<el-icon><check /></el-icon></el-button>
          <el-button @click="deleteGroup(scope.row.id)"  size="default" type="danger">删除群组<el-icon><danger/></el-icon></el-button>
        </template>
      </el-table-column>



    </el-table>

    <el-pagination @size-change="sizeChange" @current-change="currentChange"
    :current-page="page" :page-size="size" :page-sizes="pageSizes"
    layout="total,sizes,prev,pager,next，jumper" :total="total">

    </el-pagination>



  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import GLOBAL from "@/api/global_variable";

export default {
  name: "answerGroup",
  data(){
    return{
      tableData: '',
      page: '1',
      size: 10,
      total: '',
      allData: '',
      searchname: ''
    }
  },
  methods:{
    load(){
      this.$http.post("group/answergroupAll").then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '群组信息获取成功',
            type: 'success',
          })
          this.allData=res.data.groups
          this.getTableData()
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })



    },
    click(data){
      console.log(data)
    },

    currentChange(val){
      this.page=val
      this.getTableData()
    },
    sizeChange(val){
      this.size=val
      this.page=1
      this.getTableData()
    },
    getTableData(){
      this.tableData=this.allData.slice(
          (this.page-1)*this.size,
          this.page*this.size
      )
      this.total=this.allData.length
    },
    search(){
      this.getTableData()
      let text = this.searchname
      let reg = new RegExp(text) //声明正则变量
      this.tableData = this.tableData.filter(item => reg.test(item.name)) //返回
    },
    deleteGroup(id){
      this.$http.post("/group/deleteanswergroup",id).then(res=>{
        if(res.statusCode == '200'){
          this.allData=res.data.groups
          this.getTableData()
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        }else {
          ElMessage.error('删除失败！')
        }
      }).catch(()=>{
        ElMessage.error('删除失败！')
      })
    },edit(id){
      GLOBAL.answerGruId=id
      this.$router.push("/answerGruChan")
    },creat(){
      this.$router.push("/creatAnswerGroup")
    },deleteAnswer(answername)
    {
      console.log(answername)
      this.$http.post("/user/deleteusergroup",answername).then(res=>{
        if(res.statusCode == '200'){
          this.load()
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        }else {
          ElMessage.error('删除失败！')
        }
      }).catch(()=>{
        ElMessage.error('删除失败！')
      })
    }

  },
  created() {
    this.load()
  }
}
</script>

<style scoped>

</style>
